<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <style>
        body {
            height: 10000px;

        }
        #head{
            height: 100px;
        }
        #search {
            margin-left: 500px;
            margin-top: 200px;
        }

        #search input {

        }

    </style>

    <script>
        var initHeight = 0;
        window.onload = function () {
            //获得元素一开始的距离上边的高度
            var s = document.getElementById("search");
            initHeight = s.offsetTop;
        }
        window.onscroll = function () {
            var y = document.body.scrollTop || document.documentElement.scrollTop;
            var s = document.getElementById("search");
            console.log("滚动：" + y + "相对高度：" + initHeight)
            if (y > initHeight + 5) {
                s.style.position = "fixed";
                s.style.top = "5px";
                s.style.marginTop = "5px";

            } else {
                s.style.position = "static";
                // s.style.position = 'absolute';
                // s.style.marginLeft="500px";
                // s.style.marginTop="200";
            }
        }
    </script>


</head>
<body>
<div id="head">
</div>
    <div id="search">
        <form action="#">
            <input type="text">
            <input type="button" value="点击搜索">
        </form>

    </div>

</body>
</html>